<template>
  <div>
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
        <el-form-item label="平台名称" prop="name">
          <el-input v-model="queryParams.name" clearable placeholder="请输入平台名称" />
        </el-form-item>
        <el-form-item label="平台代码" prop="code">
          <el-input v-model="queryParams.code" clearable placeholder="请输入平台代码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="never">
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="平台名称" prop="name" min-width="160">
          <template #default="scope">
            {{ scope.row.name || "--" }}
          </template>
        </el-table-column>
        <el-table-column label="平台代码" prop="code" min-width="160">
          <template #default="scope">
            {{ scope.row.code || "--" }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createdAt" min-width="160">
          <template #default="scope">
            {{ scope.row.createdAt ? formatDate(scope.row.createdAt) : "--" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default="scope">
            <el-button type="text" @click="handleUse(scope.row)">配置</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-model:current-page="paging.page"
          v-model:page-size="paging.size"
          :page-sizes="['10', '20', '30', '50', '100']"
          :size="paging.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <Form ref="EditFormRef" />
    <ApiForm ref="apiFormRef" />
  </div>
</template>

<script setup>
import Form from "./form.vue";
import ApiForm from "./apiForm.vue";
import useToggle from "@/hooks/useToggle";
import { formatDate } from "@/utils";
import { smsValids } from "@/api/platformConfig/index.api";
// import useCountries from "@/hooks/useCountries";
// const { countriesList, getCountryName } = useCountries();
const [loading, _, setLoading] = useToggle();

const queryParams = ref({
  name: void undefined,
  code: void undefined,
});

const paging = ref({
  page: 1,
  size: 10,
  total: 0,
});

const tableData = ref([]);

const apiFormRef = ref(null);
const EditFormRef = ref(null);
const handleUse = (row) => {
  console.log(row);

  if (row.code == "api") {
    apiFormRef.value.handleOpen(row.custom, row.id);
    return;
  }
  EditFormRef.value.handleOpen(row.custom, row.id, null, null, row.code);
};

const handleSizeChange = (e) => {
  paging.value.size = e;
  getList();
};
const handleCurrentChange = (e) => {
  paging.value.page = e;
  getList();
};

const ids = ref([]);
const handleSelectionChange = (e) => {
  ids.value = e.map((item) => item.id);
};

const getList = async () => {
  try {
    setLoading(true);
    const res = await smsValids({
      page: paging.value.page,
      size: paging.value.size,
      name: queryParams.value.name,
      code: queryParams.value.code,
    });
    paging.value.total = res.count;
    tableData.value = res.valids;
    setLoading(false);
  } finally {
    setLoading(false);
  }
};

const handleQuery = () => {
  paging.value.page = 1;
  getList();
};

handleQuery();

const queryFormRef = ref(null);
const handleResetQuery = () => {
  if (!queryFormRef.value) return;
  queryFormRef.value.resetFields();
  handleQuery();
};

// const handleClickBatch = (command, type, row) => {
//   const commands = {
//     edit: () => handleAddRow(row),
//     delete: () => handleDelete(row),
//   }[`${command}`];

//   return commands && commands();
// };

// const handleDelete = (row) => {
//   if (!row.id && ids.value.length === 0) return ElMessage.warning("请选择要删除的记录");
//   const tips = `确定删除${!row.id ? `${ids.value.length}条记录` : "这条记录"}?`;

//   ElMessageBox.confirm(tips, "温馨提示", {
//     confirmButtonText: "确定",
//     cancelButtonText: "取消",
//     type: "warning",
//   }).then(() => {
//     del();
//   });

//   const del = async () => {
//     if (row.id) {
//       const res = await delIds({ ids: [Number(row.id)] });
//       console.log(res);
//       if (res) {
//         ElMessage.success("删除成功");
//         handleQuery();
//       }
//       return;
//     }

//     const res = await delIds({ ids: ids.value });
//     if (res) {
//       ElMessage.success("删除成功");
//       handleQuery();
//     }
//   };
// };

// const formRef = ref(null);
// const handleAddRow = (row) => {
//   console.log(formRef.value);
//   formRef.value.handleOpen(row);
// };
</script>

<style scoped lang="scss">
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
</style>
